@page
@using Three.BookStore.Web.Pages.Role
@model IndexModel
@using Three.BookStore.Web.Menus
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@inject IPageLayout PageLayout
@{
    PageLayout.Content.MenuItemName = BookStoreMenus.Role;
    ViewBag.Title = "角色管理";
}

<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="card-title">角色列表</h5>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-primary" id="btnAdd">
                        <i class="fa fa-plus"></i> 添加角色
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- 搜索栏 -->
            <form class="row g-3 mb-4" lay-filter="searchForm">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text">角色名称</span>
                        <input type="text" class="form-control" name="roleName" placeholder="请输入角色名称">
                        <button class="btn btn-outline-secondary" type="submit" lay-submit lay-filter="searchForm">
                            <i class="fa fa-search"></i> 搜索
                        </button>
                    </div>
                </div>
            </form>

            <!-- 数据表格 -->
            <div class="table-responsive">
                <table id="roleTable" lay-filter="roleTable" class="table table-striped table-hover"></table>
            </div>
        </div>
    </div>
</div>

<!-- 表格工具栏模板 -->
<script type="text/html" id="tableBar">
    <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-primary" lay-event="edit">
            <i class="fa fa-edit"></i> 编辑
        </button>
        <button type="button" class="btn btn-danger" lay-event="del">
            <i class="fa fa-trash"></i> 删除
        </button>
    </div>
</script>

<!-- 添加/编辑表单模板 -->
<div id="editFormContainer" style="display: none; padding: 20px;">
    <form id="roleForm" method="post">
        <div class="mb-3">
            <label for="editRoleName" class="form-label">角色名称</label>
            <input type="hidden" id="editId" name="id">
            <input type="text" class="form-control" id="editRoleName" name="RoleName" required placeholder="请输入角色名称">
        </div>
        <div class="text-center">
            <button type="button" class="btn btn-primary" id="btnSubmit">
                <i class="fa fa-save"></i> 提交
            </button>
            <button type="reset" class="btn btn-secondary">
                <i class="fa fa-redo"></i> 重置
            </button>
        </div>
    </form>
</div>

@section styles {
    <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet">
    <style>
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        .layui-layer {
            border-radius: 8px;
            overflow: hidden;
        }
        .layui-layer-title {
            background-color: #f8f9fa;
            color: #212529;
            font-weight: 500;
            border-bottom: 1px solid #dee2e6;
        }
        .layui-form-label {
            font-weight: 500;
        }
        .layui-btn {
            border-radius: 4px;
        }
    </style>
}

@section scripts {
    <script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'jquery'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;

            // 初始化表格
            table.render({
                elem: '#roleTable',
                url: '/RBAC/GetRoles',
                page: false,
                skin: 'line',
                even: true,
                size: 'lg',
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'roleName', title: '角色名称', minWidth: 180},
                    {title: '操作', width: 180, toolbar: '#tableBar', fixed: 'right', align: 'center'}
                ]],
                done: function() {
                    // 表格渲染完成后的回调
                    $('.layui-table-cell').css('padding', '10px 15px');
                }
            });

            // 搜索表单提交
            form.on('submit(searchForm)', function(data){
                table.reload('roleTable', {
                    where: data.field
                });
                return false;
            });

            // 显示编辑表单
            function showEditForm(data){
                // 清空表单
                $('#editId').val('');
                $('#editRoleName').val('');
                
                // 如果是编辑，填充数据
                if(data){
                    $('#editId').val(data.id);
                    $('#editRoleName').val(data.roleName);
                }
                
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: data ? '<i class="fa fa-edit"></i> 编辑角色' : '<i class="fa fa-plus"></i> 添加角色',
                    content: $('#editFormContainer'),
                    area: ['500px', '300px'],
                    skin: 'layui-layer-molv',
                    shade: 0.3,
                    anim: 1,
                    success: function(layero) {
                        $(layero).find('.layui-layer-title').css({
                            'background-color': '#f8f9fa',
                            'color': '#212529',
                            'border-bottom': '1px solid #dee2e6'
                        });
                    }
                });
            }

            // 新增按钮点击事件
            $('#btnAdd').on('click', function(){
                showEditForm();
            });

            // 监听工具条事件
            table.on('tool(roleTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    showEditForm(data);
                } else if(obj.event === 'del'){
                    layer.confirm('确定要删除此角色吗？', {
                        icon: 3,
                        title: '提示',
                        skin: 'layui-layer-molv',
                        btn: ['确定','取消']
                    }, function(index){
                        $.ajax({
                            url: '/RBAC/DeleteRole',
                            type: 'POST',
                            data: { id: data.id },
                            traditional: true,
                            success: function(res){
                                if(res.success){
                                    layer.msg('删除成功', {icon: 1});
                                    table.reload('roleTable');
                                } else {
                                    layer.msg('删除失败：' + res.message, {icon: 2});
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // 提交按钮点击事件
            $('#btnSubmit').on('click', function(){
                var id = $('#editId').val();
                var roleName = $('#editRoleName').val();
                
                if(!roleName){
                    layer.msg('角色名称不能为空', {icon: 2});
                    return;
                }
                
                // 创建一个表单数据对象
                var formData = new FormData();
                formData.append('RoleName', roleName);
                if(id) {
                    formData.append('id', id);
                }
                
                $.ajax({
                    url: id ? '/RBAC/UpdateRole' : '/RBAC/CreateRole',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res){
                        if(res.success){
                            layer.closeAll();
                            layer.msg('操作成功', {icon: 1});
                            table.reload('roleTable');
                        } else {
                            layer.msg('操作失败：' + res.message, {icon: 2});
                        }
                    },
                    error: function(xhr, status, error){
                        console.log('错误信息：', xhr.responseText);
                        layer.msg('请求失败，请查看控制台了解详情', {icon: 2});
                    }
                });
            });
        });
    </script>
} 